import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import { Menu, Icon, Tooltip } from 'antd';
const SubMenu = Menu.SubMenu;
import { WeaTableNew } from 'comsMobx';
const WeaTable = WeaTableNew.WeaTable;
import { WeaErrorPage, WeaLeftRightLayout, WeaTop, WeaRightMenu, WeaRadioGroup, WeaReportCard, WeaEchart, WeaNewScroll, WeaSelect, WeaAlertPage, WeaTab } from "ecCom";
import * as cct from '../../constants/CommonConstant';
import * as rct from '../../constants/ReportConstant';
import "./style/index.css";

@inject('contractStatusStore')
@observer
class ContractStatusReport extends React.Component {

    constructor(props) {
        super(props);
    }

    // componentWillMount() {
    //     const params = {page:'getReportByState'};
    //     const store = this.props.reportStore;
    //     store.init(params);
    // }

    componentWillUpdate() {

    }

    componentDidUpdate() {
        // this.refs.chart.clear();
        if (this.refs.chart1) {
            this.refs.chart1.paint();
        }
        if (this.refs.chart2) {
            this.refs.chart2.paint();
        }
    }

    componentWillReceiveProps(nextProps){
        
        const flag = this.props.hasOwnProperty("location");
        if(flag){
            const keyOld = this.props.location.key;
            const keyNew = nextProps.location.key;
            if(keyOld!=keyNew){
                const store = this.props.contractStatusStore;
                store.reLoad();
            }
        }
    }

    render() {
        const store = this.props.contractStatusStore;

        let { tableStore, loading, contract_amounts, contract_quantitys, names, tabKey, showList } = store;
        contract_amounts = toJS(contract_amounts);
        contract_quantitys = toJS(contract_quantitys);
        names = toJS(names);


        const config = [
            rct.year,
            rct.props
        ];

        const option1 = {
            color : rct.colors,
            title : {
                text: '按数量占比',
                // subtext: '纯属虚构',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                x : 'center',
                y : 'top',
                left: "right",
                data:names
            },
            toolbox: {
                show : false,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {
                        show: true,
                        type: ['pie', 'funnel']
                    },
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            series : [
                {
                    name:'合同数量',
                    type:'pie',
                    center : ['50%', '50%'],
                    data:contract_quantitys,
                    label: {
                        normal: {
                            formatter: '  {b|{b}：}{c}  {per|{d}%}  ',
                            // backgroundColor: '#eee',
                            // borderColor: '#aaa',
                            // borderWidth: 1,
                            // borderRadius: 4,
                            // shadowBlur:3,
                            // shadowOffsetX: 2,
                            // shadowOffsetY: 2,
                            // shadowColor: '#999',
                            // padding: [0, 7],
                            rich: {
                                // a: {
                                //     color: '#999',
                                //     lineHeight: 22,
                                //     align: 'center'
                                // },
                                // abg: {
                                //     backgroundColor: '#333',
                                //     width: '100%',
                                //     align: 'right',
                                //     height: 22,
                                //     borderRadius: [4, 4, 0, 0]
                                // },
                                // hr: {
                                //     borderColor: '#aaa',
                                //     width: '100%',
                                //     borderWidth: 0.5,
                                //     height: 0
                                // },
                                b: {
                                    fontSize: 14,
                                    lineHeight: 33
                                },
                                per: {
                                    color: '#eee',
                                    backgroundColor: '#334455',
                                    padding: [2, 4],
                                    borderRadius: 2
                                }
                            }
                        }
                    }
                }
            ]
        };
        

        const option2 = {
            color : rct.colors,
            title : {
                text: '按金额占比',
                // subtext: '纯属虚构',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                x : 'center',
                y : 'top',
                left: "right",
                data:names
            },
            toolbox: {
                show : false,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {
                        show: true,
                        type: ['pie', 'funnel']
                    },
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            series : [
                {
                    name:'合同金额占比',
                    type:'pie',
                    center : ['50%', '50%'],
                    data:contract_amounts,
                    label: {
                        normal: {
                            formatter: '  {b|{b}：}{c}  {per|{d}%}  ',
                            // backgroundColor: '#eee',
                            // borderColor: '#aaa',
                            // borderWidth: 1,
                            // borderRadius: 4,
                            // shadowBlur:3,
                            // shadowOffsetX: 2,
                            // shadowOffsetY: 2,
                            // shadowColor: '#999',
                            // padding: [0, 7],
                            rich: {
                                // a: {
                                //     color: '#999',
                                //     lineHeight: 22,
                                //     align: 'center'
                                // },
                                // abg: {
                                //     backgroundColor: '#333',
                                //     width: '100%',
                                //     align: 'right',
                                //     height: 22,
                                //     borderRadius: [4, 4, 0, 0]
                                // },
                                // hr: {
                                //     borderColor: '#aaa',
                                //     width: '100%',
                                //     borderWidth: 0.5,
                                //     height: 0
                                // },
                                b: {
                                    fontSize: 14,
                                    lineHeight: 33
                                },
                                per: {
                                    color: '#eee',
                                    backgroundColor: '#334455',
                                    padding: [2, 4],
                                    borderRadius: 2
                                }
                            }
                        }
                    }
                }
            ]
        };
        
        return (
            <WeaRightMenu>
                <WeaTop
                    loading={loading}
                    title={"合同状态分析"}
                    icon={<i className={cct.icon} />}
                    iconBgcolor={cct.iconBgcolor}
                    showDropIcon={true}
                    dropMenuDatas={[]}
                    buttons={[<span className="wea-contract-showlist">
                    <Tooltip title={`${showList?'隐藏列表':'显示列表'}`}>
                        <span className={`icon ${showList?'cur':''}`} onClick={this.changeShowList.bind(this, showList)}>
                            <i className={`icon-coms-List`} />
                        </span>
                    </Tooltip>
                </span>
                ]}
                    buttonSpace={10}
                >
                    <div className="wea-contract-report">
                        <div className="content">
                            <WeaNewScroll height='100%' toTop={true}>
                                <div className="scroll-content">
                                    <div style={{ paddingTop: "10px" }}>
                                        <WeaRadioGroup config={config} onChange={(params) => { store.doSearch(params) }} />
                                    </div>
                                    <div class="card-report" >
                                        <div style={{width:"50%",float:"left",paddingRight:"5px",height:"100%"}}>
                                        <WeaReportCard
                                                title={"合同数量占比统计"}
                                                onMoreClick={v => console.log('onMoreClick')}
                                                onDownloadClick={v => console.log('onDownloadClick')}
                                                operations={<div></div>}
                                            >
                                        {(
                                            names.length > 0?<WeaEchart ref={"chart1"} option={option1} useDefault={false} style={{height:'325px'}}/>:
                                            <WeaAlertPage icon="icon-coms-blank">
                                                <div>暂无数据</div>
                                            </WeaAlertPage>
                                        )}
                                        </WeaReportCard></div>
                                        <div style={{width:"50%",float:"left",paddingLeft:"5px",height:"100%"}}>
                                        <WeaReportCard
                                                title={"合同金额占比统计"}
                                                onMoreClick={v => console.log('onMoreClick')}
                                                onDownloadClick={v => console.log('onDownloadClick')}
                                                operations={<div></div>}
                                            >
                                        {(
                                            names.length > 0?<WeaEchart ref={"chart2"} option={option2} useDefault={false} style={{height:'325px'}}/>:
                                            <WeaAlertPage icon="icon-coms-blank">
                                                <div>暂无数据</div>
                                            </WeaAlertPage>
                                        )}
                                        </WeaReportCard>
                                        </div>
                                    </div>
                                    {(
                                        showList&&
                                        <div style={{ paddingTop: "10px" }}>
                                            <WeaTable comsWeaTableStore={tableStore}/>
                                        </div>
                                    )}
                                </div>
                            </WeaNewScroll>
                        </div>
                    </div>
                </WeaTop>
            </WeaRightMenu>
        );
    }

    changeShowList = (bl, e) => {
        e.preventDefault();
        e.stopPropagation();
        const { changeShowList } = this.props.contractStatusStore;
        changeShowList(bl);
    }

}

export default ContractStatusReport;